import React, { memo, useCallback } from 'react'
import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css'
import { ArticleNavbarWrapper } from './style'
import { Tabs } from 'antd'
import About from '@/components/b_about'
import { scrollAnimation } from '@/utils/scroll'

function ArticleNavbar(props) {
  const { articleDetail = {} } = props
  const { TabPane } = Tabs

  const itemClick = useCallback((event, element, hashValue) => {
    let ele = document.querySelector(`[data-id=${hashValue}]`)
    if (ele) {
      const top = ele.getBoundingClientRect().top
      scrollAnimation(window.scrollY, window.scrollY + top)
    }
  }, [])

  return (
    <ArticleNavbarWrapper className="base-bgc">
      <Tabs defaultActiveKey="1" centered className="article-detail-tabs">
        <TabPane tab="文章目录" key="1">
          <MarkNav
            className="article-menu"
            source={articleDetail.content}
            ordered={false}
            headingTopOffset={-window.innerHeight - 20}
            onNavItemClick={itemClick}
          />
        </TabPane>
        <TabPane tab="关于我" key="2">
          <About />
        </TabPane>
      </Tabs>
    </ArticleNavbarWrapper>
  )
}

export default memo(ArticleNavbar)
